<template>
 <view class="video">
  <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" inactive-color="#ccc" active-color="#000" :bold="false" :bar-style="{ height: '2px' }"></u-tabs>
  <view class="vodeoList">
   <view class="videoItem" v-for="(item,index) in videoList" :key="index">
    <video :src="item.src" controls></video>
    <view class="videoTiele">{{item.title}}</view>
   </view>
  </view>
 </view>
</template>

<script>
export default {
 data() {
  return {
   list: [
    {
     name: '现场'
    },
    {
     name: '翻唱'
    },
    {
     name: '舞蹈'
    },
    {
     name: 'BGM'
    }
   ],
    
   videoList:[
    {title:'人生若只如初见，何事秋风悲画扇',src:'https://loushu-cz.oss-cn-shanghai.aliyuncs.com/eb-videos/bac57ccb05b84cebdc063615e481fc05.mp4'},
     {title:'人生若只如初见，何事秋风悲画扇2',src:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'},
     {title:'人生若只如初见，何事秋风悲画扇3',src:'https://gd-sycdn.kuwo.cn/2569b2d1f1abab2a4a586c7373216899/616a650d/resource/m1/52/42/2956791687.mp4'}
                
     ],
   current: 0
  };
 },
 methods: {
  change(index) {
   this.current = index;
  }
 },
 onLoad() {
  this.$nextTick(function() {
   //当前页面的video只播放一个
   var videos = document.getElementsByTagName('video');
   for (var i = videos.length - 1; i >= 0; i--) {
    (function() {
     var p = i;
     videos[p].addEventListener('play', function() {
      pauseAll(p);
     });
    })();
   }
   function pauseAll(index) {
    for (var j = videos.length - 1; j >= 0; j--) {
     if (j != index) videos[j].pause();
    }
   }
  });
 }
};
</script>

<style lang="less" scoped>
.video {
 .vodeoList {
  .videoItem {
   margin-left: 10px;
   margin-bottom: 10px;
   video {
    height: 150px;
    width: calc(100% - 10px);
    border-radius: 5px;
   }
   .videoTiele {
    font-size: 13px;
    font-weight: 600;
   }
  }
 }
}
</style>